<template>
  <div>
    <el-card class="form-container" shadow="never">
      <el-form
        :model="videoForm"
        :rules="rules"
        ref="videoForm"
        label-position="top"
      >
        <el-form-item label="视频上传" prop="url">
          <SingleVideoUpload v-model="videoForm.url"></SingleVideoUpload>
        </el-form-item>
        <el-form-item label="视频封面" prop="cover">
          <SingleImgUpload v-model="videoForm.cover"></SingleImgUpload>
        </el-form-item>
        <el-form-item label="类型" prop="videoType">
          <el-radio-group
            v-model="videoForm.videoType"
            @change="handleVideoTypeChange"
          >
            <el-radio :label="selfMadeType">自制</el-radio>
            <el-radio :label="rePrintType">转载</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="转载链接"
          prop="fromUrl"
          v-if="videoForm.videoType === rePrintType"
        >
          <el-input
            v-model="videoForm.fromUrl"
            maxlength="200"
            show-word-limit
            placeholder="转载视频请注明来源(如，转自http://www.xxxx.com/qqqq)，注明来源有助于更快审核"
          ></el-input>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="videoForm.title"
            maxlength="80"
            show-word-limit
            placeholder="请填写标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="分区" required>
          <el-cascader v-model="partitionOption" :options="partitionOptions">
          </el-cascader>
        </el-form-item>
        <!-- <el-form-item label="标签" prop="tags"> -->
        <!-- <div v-for="(item, index) in videoForm.tags" :key="index"> -->
        <!-- {{ item }} -->
        <!-- </div> -->
        <!-- <el-input placeholder="按回车Enter创建标签"></el-input> -->
        <!-- </el-form-item> -->
        <el-form-item label="简介">
          <el-input
            type="textarea"
            v-model="videoForm.remark"
            maxlength="2000"
            show-word-limit
            placeholder="简单介绍您的视频"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="自制声明(是否禁止转载)"
          prop="rePrintPower"
          v-if="videoForm.videoType === selfMadeType"
        >
          <el-switch
            v-model="videoForm.rePrintPower"
            active-color="#dcdfe6"
            inactive-color="#13ce66"
          >
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('videoForm')"
            >投稿</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import Head from "@/components/common/Head.vue";
import SingleVideoUpload from "@/components/upload/single-video-upload.vue";
import SingleImgUpload from "@/components/upload/single-img-upload.vue";
import { fetchListWithChildren } from "@/api/partition.js";
import { saveVideo } from "@/api/video.js";
// 自制
const selfMadeType = 1;
// 转载
const rePrintType = 0;
const defaultUploadVideoForm = {
  uvid: null,
  uuid: null,
  userAvatar: "",
  userNickname: "",
  // 分区code
  pid: null,
  partitionName: null,
  // 暂未用到，视频分级
  level: 0,
  title: "",
  videoType: selfMadeType,
  // 是否可转载
  rePrintPower: false,
  fromUrl: "",
  // 集数，暂未用到
  seriesNum: 1,
  cover: "",
  url: "",
  remark: "",
  // 标签列表，暂未用到
  // tags: [],
};
export default {
  name: 'VideoDetail',
  components: { Head, SingleVideoUpload, SingleImgUpload },
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    var checkFromUrl = (rule, value, callback) => {
      if (this.videoForm.videoType === this.rePrintType) {
        // 转载的视频必须填写转载链接
        if (value === "" || value === undefined) {
          callback(new Error("转载视频请注明来源"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    var checkRePrintPower = (rule, value, callback) => {
      if (this.videoForm.videoType === this.rePrintType) {
        // 转载的视频，不可设置不可转载
        if (value === false) {
          callback(new Error("转载视频不可设置是否转载"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {
      selfMadeType: selfMadeType,
      rePrintType: rePrintType,
      // 分区下拉选项
      partitionOptions: [],
      // 选中的分区
      partitionOption: [],
      videoForm: Object.assign({}, defaultUploadVideoForm),
      rules: {
        // uuid: [{ required: true }],
        // userNickname: [{ required: true }],
        // pid: [{ required: true, message: "请选择分区", trigger: "change" }],
        // partitionName: [
        //   { required: true, message: "请选择分区", trigger: "change" },
        // ],
        // level: [{ required: true }],
        // title: [
        //   { required: true, message: "请输入标题", trigger: "blur" },
        //   { max: 80, message: "标题长度不超过80个字符" },
        // ],
        // videoType: [
        //   { required: true, message: "请选择转载类型", trigger: "change" },
        // ],
        // // fromUrl: [{required: this.videoForm.videoType === this.rePrint, message: "请填写转载链接"}],
        // cover: [{ required: true, message: "请选择封面", trigger: "blur" }],
        // url: [{ required: true, message: "请上传视频", trigger: "blur" }],
        // remark: [
        //   { max: 2000, message: "简介长度不超过2000个字符", trigger: "change" },
        // ],
        // rePrintPower: [{ validator: checkRePrintPower, trigger: "blur" }],
        // fromUrl: [{ validator: checkFromUrl, trigger: "blur" }],
      },
    };
  },
  created: function () {
    this.getPartitions();
    this.initVideoForm();
  },
  watch: {
    // 监听选择分区的改变
    partitionOption: function (newValue) {
      if (newValue != null) {
        if (newValue.length === 2) {
          this.videoForm.pid = newValue[1];
        } else if (newValue.length === 3) {
          this.videoForm.pid = newValue[2];
        }
        this.videoForm.partitionName = this.getPartitionNameById(
          this.videoForm.pid
        );
      } else {
        this.videoForm.pid = null;
        this.videoForm.partitionName = null;
      }
    },
  },
  methods: {
    initVideoForm() {
      if (this.isEdit) {
        // todo
      } else {
        this.videoForm.uuid = this.$store.getters.uuid;
        this.videoForm.userAvatar = this.$store.getters.avatar;
        this.videoForm.userNickname = this.$store.getters.nickname;
      }
    },
    getPartitions() {
      fetchListWithChildren().then((res) => {
        let list = res.data;
        this.partitionOptions = [];
        for (let i = 0; i < list.length; i++) {
          let secondChildren = [];
          let secondChildrenList = list[i].children;
          if (secondChildrenList != null && secondChildrenList.length > 0) {
            for (let j = 0; j < secondChildrenList.length; j++) {
              let thirdChildren = [];
              let thirdChildrenList = secondChildrenList[j].children;
              if (thirdChildrenList != null && thirdChildrenList.length > 0) {
                for (let k = 0; k < thirdChildrenList.length; k++) {
                  // 存三级分区
                  thirdChildren.push({
                    label: thirdChildrenList[k].partitionName,
                    value: thirdChildrenList[k].id,
                  });
                }
              }
              // 存二级分区
              if (thirdChildren != null && thirdChildren.length > 0) {
                secondChildren.push({
                  label: secondChildrenList[j].partitionName,
                  value: secondChildrenList[j].id,
                  children: thirdChildren,
                });
              } else {
                secondChildren.push({
                  label: secondChildrenList[j].partitionName,
                  value: secondChildrenList[j].id,
                });
              }
            }
          }
          // 存一级分区
          this.partitionOptions.push({
            label: list[i].partitionName,
            value: list[i].id,
            children: secondChildren,
          });
        }
      });
    },
    getPartitionNameById(id) {
      let name = null;
      for (let i = 0; i < this.partitionOptions.length; i++) {
        let secondChildrenList = this.partitionOptions[i].children;
        for (let j = 0; j < secondChildrenList.length; j++) {
          if (secondChildrenList[j].value === id) {
            // 先查是否选中的是二级目录
            name = secondChildrenList[j].label;
            return name;
          } else {
            let thirdChildrenList =
              this.partitionOptions[i].children[j].children;
            if (thirdChildrenList !== null && thirdChildrenList !== undefined) {
              for (let k = 0; k < thirdChildrenList.length; k++) {
                if (thirdChildrenList[k].value === id) {
                  name = thirdChildrenList[k].label;
                  return name;
                }
              }
            }
          }
        }
      }
    },
    handleVideoTypeChange() {
      // videoType变化
      if (this.videoForm.videoType === this.rePrintType) {
        this.videoForm.rePrintPower = true;
      } else {
        this.videoForm.rePrintPower = false;
      }
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // saveVideo(this.videoForm).then((res) => {
          //   this.$message({
          //     type: "success",
          //     message: "投稿成功",
          //     duration: 1000,
          //   });
            this.$router.push("/");
          // });
        } else {
          this.$message({
            message: "请检查参数是否正确",
            type: "error",
            duration: 1000,
          });
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-form-item__label {
  font-weight: bold;
}
</style>